<%@page import="com.crm.entity.InvoiceStatus,com.crm.util.Constants"%>
<%@page import="java.util.List,com.crm.entity.Opportunity" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/temp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<link href="<%=application.getContextPath()%>/css/css-crm.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<%=application.getContextPath()%>/css/datatable.css"/>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.6.min.js"></script>	
<script language="JavaScript" src="<%=application.getContextPath()%>/js/gen_validatorv4.js"
    type="text/javascript" ></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery.validate.js"></script>	
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.7.2.min.js"></script>
<script language="javaScript" src="<%=application.getContextPath()%>/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/colResizable-1.3.min.js"></script>
 <script type="text/javascript" language="javascript" src="<%=application.getContextPath()%>/js/jquery.dataTables.nightly.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script  type="text/javascript">
$(document).ready(function() {
		$('#pendInv').dataTable();
	} );
</script>
<style>

#choice option { color: black; }
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
</style>
</head>

<body>
<div id="main">
  <%@ include file="common/header.jsp" %>
  <%@ include file="common/submenu.jsp" %>
  <%List<InvoiceStatus> opplist=(List<InvoiceStatus>)request.getAttribute("opplist"); %>
  <div id="content"><!-- InstanceBeginEditable name="EditRegion3" -->
  <form name="pendInvoices" method="post" action="<%=application.getContextPath()%>/pendInvoice/update.do">
    <div id="work-area2">
      <div class="heading2">Pending Invoices</div>
	  
      <div class="boxIFS">
      <div id="demo">
        <table id="pendInv" width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#C5E4EB">
        <thead>
          <tr>
            <th width="31" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"  style="background-repeat:repeat-x">S.No </th>
            <th width="348" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Invoice No.</th>
            <th width="301" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF"> Status</th>
            <th width="301" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF"> Order Date</th>
            <th width="301" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF"> Due Date</th>
            <th width="301" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF"> Amount</th>
          </tr>
          </thead>
          <tbody>
          <%for(int i=0;i<opplist.size();i++) {%>
          <tr>
          <input type="hidden" name="id<%=i+1 %>" value="<%=opplist.get(i).getId()%>"/>
            <td align="center" bgcolor="#FFFFFF"><input name="sno" type="text" size="5" value="<%=i+1 %>"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input name="invoiceNo<%=i+1 %>" type="text" size="5" value="<%=opplist.get(i).getInvoicenumber()%>"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF">
            <select name="status<%=i+1 %>" class="choice">
            	<option  style='color: red;' <%if(opplist.get(i).getStatus().equalsIgnoreCase(Constants.PENDING)|| opplist.get(i).getStatus().equalsIgnoreCase(null)) out.println("selected='selected'"); %> value="<%=Constants.PENDING %>"><%=Constants.PENDING %></option>
            	<option  style='color: green;' <%if(opplist.get(i).getStatus().equalsIgnoreCase(Constants.PAID)) out.println("selected='selected'"); %> value="<%=Constants.PAID %>"><%=Constants.PAID %></option>
            	<option  style='color: red;' <%if(opplist.get(i).getStatus().equalsIgnoreCase(Constants.PENDING_90_10)) out.println("selected='selected'"); %>  value="<%=Constants.PENDING_90_10%>"><%=Constants.PENDING_90_10 %></option>
            </select>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input name="soDate<%=i+1 %>" type="text" size="5" value="<%=opplist.get(i).getSoDate()%>"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input name="dueDate<%=i+1 %>" type="text" size="5" value="<%=opplist.get(i).getSoDueDate()%>"/></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input name="amount<%=i+1 %>" type="text" size="5" value="<%=opplist.get(i).getAmount()%>"/></td>
          </tr>
          <%} %>
          </tbody>
        </table>
        <input type="hidden" name="rowCount" value="${fn:length(opplist) }"/>
        </div>
      </div>
	  <div class="box2">
	    <div class="buttton-main">
	    <!-- <div class="button">Close</div> -->
	    <input type="submit" value="Update" class="button"/>
	  </div>
	  
    </div>
  </div>
  </form>
  <table style="height:300px; width:910px;" ><tr><td>
	   <div class="boxtable" id="result">
	   <div id="partsDiv"></div>
	  </div>
	  </td>
	  </tr>
	  </table>
    <!-- InstanceEndEditable -->
    </div><div id="footer"></div>  
</div>
</body>
<!-- InstanceEnd --></html>
<script type="text/javascript">
$(".choice").change(function () {
    if($(this).val() == "<%=Constants.PAID %>") $(this).addClass("green");
    else $(this).removeClass("green");
});
$(".choice").change(function () {
    if($(this).val() == "<%=Constants.PENDING%>" ||$(this).val() == "<%=Constants.PENDING_90_10%>" ) $(this).addClass("red");
    else $(this).removeClass("red");
});
$(".choice").change();
</script>